<template>
    <div class="bg-white">
        <div class="menubox df df-ww">
            <div class="item" :class="{active:active==1}" @click="active=1">应用介绍</div>
            <!-- <div class="item" :class="{active:active==2}" @click="active=2"><span>版本更新</span><span class="c-blue b ml-2">10</span></div>
            <div class="item" :class="{active:active==3}" @click="active=3"><span>用户评论</span><span class="c-blue b ml-2">10</span></div> -->
            <div class="item" :class="{active:active==4}" @click="active=4">售后服务</div>
        </div>
        <div>
            <div v-if="active==1" class="active1 c-99 fs-14">
                <div v-html="data.describe"></div>
            </div>
            <!-- <div v-if="active==2" class="active2">
                <ul>
                    <li class="item df" v-for="i in 12" :key="i">
                        <div class="version df-s0 df df-c ai-c jc-c">
                            <div class="fs-24 c-blue">14</div>
                            <div class="mt-6">2022-09-08</div>
                        </div>
                        <div class="line"><div class="point"></div></div>
                        <div class="versiondata fc">
                            <div class="tt df ai-c jc-b c-blue">
                                <div class="fs-16">版本号：1.0.9 - 默认</div>
                                <div>29:23</div>
                            </div>
                            <div class="ct">啊手动阀手动阀</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div v-if="active==3" class="active3">
                <div class="comment df">
                    <div class="df df-c ai-c commentdata">
                        <div class="fs-16 b">评分与评论</div>
                        <div class="fs-24 c-blue mt-12 lh-12">0</div>
                        <div class="fs-16 mt-12">累计评分0次</div>
                    </div>
                </div>
            </div> -->
            <div v-if="active==4" class="active4">

            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['data'],
    data(){
        return {
            active:1,
        }
    },
    created(){
        if(this.data){this.init()}
    },
    methods:{
        init(){
            this.data.describe = this.htmlDecode(this.data.description);
        },
        htmlDecode(text) {
            var sub = document.createElement('div');
            sub.innerHTML = text;
            var output = sub.textContent || sub.innerText;
            sub = null;
            return output;
        },
    },
    watch:{
        data(){
            this.init();
        }
    },
}
</script>

<style scoped>
.menubox{border-bottom:1px solid #ecedf0;}
.menubox .item{height:52px; margin:0 24px; border-bottom:3px solid transparent; display:flex; align-items:center; cursor:pointer;}
.menubox .item:hover,
.menubox .item.active{border-color:var(--theme);}
.active1{padding:20px; overflow:auto;}
.active1>>>img{max-width:100%!important;}
/* .active1 .tb{width:100%;}
.active1 .tb td{padding:10px 20px; border:1px solid;}
.active1 .detailimg{display:block; width:100%; height:auto;} */
.active2{padding:0 20px;}
.active2 .item{padding:20px 0; position:relative;}
.active2 .item .version{width:100px; margin-right:50px;}
.active2 .item .line{position:absolute; top:0; bottom:0; left:100px; width:50px;}
.active2 .item .line::before{content:" ";position:absolute; top:0; bottom:50%; left:25px; width:1px; background:#f2f2f2;}
.active2 .item .line::after{content:" ";position:absolute; top:50%; bottom:0; left:25px; width:1px; background:#f2f2f2;}
.active2 .item .line .point{position:absolute; top:50%; left:50%; transform:translateX(-6px); width:13px; height:13px; background:var(--theme); border-radius:50%; z-index:9;}
.active2 .item:first-child .line::before{display:none;}
.active2 .item:last-child .line::after{display:none;}
.active2 .item .versiondata{border:1px solid #e7e6eb; border-radius:5px;}
.active2 .item .versiondata .tt{background:#f3f3f3; height:40px; padding:0 20px;}
.active2 .item .versiondata .ct{padding:20px;}
.active3{padding:20px 0;}
.active3 .comment .commentdata{padding:10px 0; width:180px; border-right:1px dashed #e7e6eb;}
</style>
